import '../../style/outSign.less';
import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Tools, Icon, Tabs} from 'weaver-mobile';
import SignContainer from './sign';
import RecordContainer from './record';
import SignRouteLayout from './sign/SignRouteLayout';
import SearchNearBy from './sign/SearchNearBy';
import RecordRouteLayout from './record/RecordRouteLayout';
import AdvanceSearchPage from '../coms/AdvanceSearchPage';
const getLabel = Tools.getLabel;

const generateBtn = props => {
  return (
      <div className='btnItem'>
          <div className='btnIcon'>
              <Icon type={props.icon}/>
          </div>
          <div className='btnLabel'>{props.label}</div>
      </div>
  )
}

@inject('outSignStore')
@withRouter
@observer
export default class Sign extends Component {
  componentDidMount(){
    document.title = getLabel('500503','外勤打卡');
    this.init();
  }

  init = () => {
    const {outSignStore: store} = this.props;
    store.init();
  }

  render() {
    const {outSignStore: store} = this.props;

    const tabs = [ 
      { title: generateBtn({label: getLabel('500503','外勤打卡'), icon: 'position'}) },
      { title: generateBtn({label: getLabel('16886','打卡记录'), icon: 'calendar'}) }
    ];

    return (
      <div className='outSignContainer'>
        <Tabs tabs={tabs}
          page={store.initialPage}
          swipeable={false}
          tabBarPosition='bottom'
          onChange={(tab, index) => store.setTabPage(index)}
        >
          <SignContainer store={store}/>
          <RecordContainer store={store} />
        </Tabs>
        
        <Route key={store.signLayout.id} path={store.signLayout.path} render={() => <SignRouteLayout store={store}/>} />
        <Route key={store.recordLayout.id} path={store.recordLayout.path} render={() => <RecordRouteLayout store={store}/>} />
        <Route key={store.searchNearByLayout.id} path={store.searchNearByLayout.path} render={() => <SearchNearBy store={store}/>} />
      </div>
    )
  }
}